<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
	<title>产品列表</title>
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" href="/static/weixin/css/style.css" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/dropload.css}" />
	<script type="text/javascript" src="../../static/weixin/js/zepto.min.js" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript"  th:src="@{/weixin/js/dropload.min.js}"></script>
	<script type="text/javascript" src="../../static/weixin/js/adaptive.js" th:src="@{/weixin/js/adaptive.js}"></script>
</head>
<body>
	<section class="wrapper">
		<div class="searchBar box-h">
			<div class="flex tc menu">
				<span class="sort" value="updateTime,desc">最近浏览</span>
			</div>
			<div class="flex tc menu">
				<span class="sort" value="times,desc">看的最多</span>
			</div>
		</div>
		<ul class="houseList">
			
		</ul>
	</section>
	<script>
	var query = {"sort":"updateTime,desc"};
	$(function(){
		$('.menu .sort').click(function(){
			query["sort"] = $(this).attr("value");
			reload();
		})

	});    

	</script>
	
	<script  th:inline="JavaScript">
    var types = /*[[${types}]]*/ null;
	//页数 
	$(function(){
		reload();
	});

	/*<![CDATA[*/
var page = 0;
function reload(){
	$('.houseList').html('');
    $('.dropload-down').remove();
    
    page = 0;
    $('.wrapper').dropload(opt);
}	           
var opt = {
    scrollArea : window,
    autoLoad : true,//自动加载
    loadDownFn : function(me){
     window.history.pushState(null, document.title, window.location.href);
        $.ajax({
            type: 'GET',
            url:'/mall/weixin/history/list?page='+page,
            data: query,
            dataType: 'json',
            success: function(data){
                if(data.content.length == 0){
                    me.lock();
                    me.noData();
                    me.resetload();
                    return;
                }

		        var result = '';
                for(var i=0; i< data.content.length; i++){
                  result+=content(data.content[i].attach);
                }
                
                $('.houseList').append(result);
                $(".houseList .box-h").click(pick);
                page++;
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
};

function content(data){
	return '<li class="box-h" url="/mall/weixin/product/detail/'+data.id+'">'+
	'<a class="avatar" href=""><img src="/mall/upload/img/'+data.coverPic+'"></a><div class="flex">'+
	'<p class="name">'+data.name+'</p>'+
	'<p class="tip">'+ellipsis(data.description)+'</p>'+
	'<p class="tagBox">'+
		'<span>'+dict(data.type, types)+'</span>'+
		'<span>'+data.author+'</span>'+
	'</p>'+
	'<p class="price"><sub>￥</sub>'+data.price+'</p>'+
	'</div></li>'
}

function dict(value, arr){
	for(var i in arr){
		if(value == arr[i]["value"])
			return arr[i]["name"];
	}
}
function pick(){
	location.href=$(this).attr("url");
}

function ellipsis(text){
	text = $('<p>'+text+'</p>').text();
	return (text.length > 20)? (text.substring(0, 80) + "...") : text ;
}
/*]]>*/
</script>   
</body>
</html>